<script setup>
/**
 * props
 */
const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
})
</script>
<template>
    <div class="goods-item">
        <div>
            <image class="goods-image" :src="item.imgUrl" mode="aspectFill" />
        </div>
        <div class="price-buy-topmess">
            <div class="price-class">￥{{ item.price }}</div>
            <div class="buy-count-class">{{ item.buyCount }}+个人付款</div>
        </div>
        <div class="goods-name-class">{{ item.name }}</div>
    </div>
</template>
<style scoped>
.goods-item {
    width: 300rpx;
    margin-top: 30rpx;
}

.goods-image {
    width: 300rpx;
    height: 220rpx;
    border-radius: 32rpx;
}

.price-class {
    color: #cb8228;
}

.buy-count-class {
    color: #eeb87e;
    font-size: 20rpx;
    position: relative;
    left: 20rpx;
    bottom: -8rpx;
}

.goods-name-class {
    color: #eeb87e;
    font-size: 25rpx;
    margin-top: 5rpx;
}

.price-buy-topmess {
    width: 230rpx;
    display: flex;
    flex-direction: row;
    margin-top: 1vh;
}
</style>